<template>
	  <div class="scell-father">
			 <div class="sell-son">
				<!-- left-->
				<div class="sell-left">
					<!-- text -->
					<ul class="sell-left-top">
						<li>序号2</li>
						<li v-for="(item,key) in scllorData.slice(0,6)" :key="key" :title="item.title"><span>{{item.title}}</span></li>
					</ul>
					
					<!-- data -->
					<ul class="sell-left-bottom"  v-for="(im,index) in scllorData.slice(7,40)" >
						<li>{{index}}</li>
						<li v-for="(im,index) in scllorData.slice(0,6)" :key="index" :title="im.title"><span>{{im.title}}</span></li>
					</ul>
					
					<!-- 滚动条 -->
            <div style="width:100%;height:15px;line-height:15px;"></div>
					
				</div>
				<!-- right -->
				<div class="sell-right">
					<div class="sell-box">
						<div class="sell-right-scroll">
							<div class="sell-right-scroll-bot"></div>
						</div>
						<div class="sell-right-centen">
							<!-- text -->
							<ul class="sell-right-top" id="sc"  >
								
								<li v-for="(item,key) in scllorData.slice(7,40)" :key="key" :title="item.title"><span>{{item.title}}</span></li>
							</ul>
							<!-- data -->
							<ul class="sell-right-bottom" v-for="(im,index) in scllorData.slice(7,40)" >
							<li v-for="(im,index) in scllorData.slice(7,40)" :key="index" :title="im.title"><span>{{im.title}}</span></li>
						</ul>
						
						<!-- 滚动条 -->
            <div style="width:100%;height:15px;line-height:15px;"></div>

					</div>
				</div>
			</div>
				 
			 </div>
			 
	     	<!-- left-->
				
				
		</div>
</template>

<script>
	import {mapGetters,mapState, mapMutations, mapActions} from 'vuex'
	import sceollcom from '@/components/sceollcom/sceollcom.vue'
	import axios from 'axios'
	import * as scrollBox from '@/models/scllorBox.js'
	export default {
		name:"SceoLeft",
		props: {
			setDatas:{//数据
				type:[Array,Object],
				default:[]
			}
		},
		data(){
			return{
		     scllorData:[]
			}
		},
		created () {
			
      this.scllorData=[...this.setDatas]     
		},
	 mounted() {
    scrollBox.init("sell-right")
		let sp=document.getElementById("sc");
		console.log("sss",sp.offsetWidth,sp.clientWidt)
  },
		methods: {
		
		},
		computed:{
			...mapState({
					
				})
		},
		watch:{
			
		},
		components:{
			
	  }
		
	}
	
</script>

<style lang="scss" scoped >
	.yv-100{width: 100%; height: 40px;}
		.scell-father{
			width: 100%;
			height: auto;
      .sell-son{
				display: flex;
				flex-direction: row;
				.sell-left{
					width: auto;
					flex-direction: column;
					.sell-left-top,.sell-left-bottom{
						display: flex;
						border-right: 1px solid darkgrey;
						justify-content:flex-start;
						flex-direction: row;
						background: cyan;
						>li{
							height: 40px;
							line-height: 40px;
							text-align: center;
							font-size: 14px;
							padding-left: 5px;
							width: 80px;
							flex: 0 0 80px;
							overflow: hidden;
						}
					}
					.sell-left-bottom{
						background: dimgray;
					}
				}
				.sell-right{
						padding-bottom: 16px;
						overflow: hidden;
						flex: 1;
					.sell-box{
						position: relative;
						.sell-right-centen{
							display: flex;
							flex-direction: column;
							flex: 1;
							position: relative;
							.sell-right-top,.sell-right-bottom{
								display: flex;
								justify-content:flex-start;
								flex-direction: row;
								background: cyan;
								>li{
									height: 40px;
									line-height: 40px;
									text-align: center;
									font-size: 14px;
									padding-left: 5px;
									width: 100px;
									flex: 0 0 100px;
									overflow: hidden;
								}
							}
							.sell-right-bottom{
								background: dimgray;
							}
						}
						.sell-right-scroll{
						position: absolute;
						bottom: -16px;
						width: 100%;
						background: peachpuff;
						height:16px;
						display: none;
						>.sell-right-scroll-bot{
							min-width: 100px;
							height: 100%;
							position: absolute;
							top:0;
							left:0;
							cursor: pointer;
							background: darksalmon;
						}
					}
					}
				}
			}			
		}
	
</style>
